﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>我的简历 - Synopsis</title>

    <!-- Meta Data -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="author" content="ArtTemplate" />
    <meta name="description" content="wheat" />

    <!-- Twitter data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ArtTemplates">
    <meta name="twitter:title" content="wheat">
    <meta name="twitter:description" content="wheat">
    <meta name="twitter:image" content="/assets/vitae/img//social.jpg">

    <!-- Open Graph data -->
    <meta property="og:title" content="ArtTemplate" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="your url website" />
    <meta property="og:image" content="/assets/vitae/img//social.jpg" />
    <meta property="og:description" content="wheat" />
    <meta property="og:site_name" content="wheat" />

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="144x144" href="/assets/vitae/img/favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/assets/vitae/img//favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/assets/vitae/img//favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="57x57" href="/assets/vitae/img//favicons/apple-touch-icon-57x57.png">
    <link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/png">

    <!-- Styles -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4073506_b2fh5gybgpl.css">
    <link rel="stylesheet" type="text/css" href="/assets/vitae/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/assets/vitae/demo/style-demo.css" />
    <!-- <link rel="stylesheet" type="text/css" href="/assets/vitae/css/style-dark.css" /> -->
    <style>
        .text_right {
            float: right;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <!-- Preloader -->
    <div class="preloader">
        <div class="preloader__progress"><span></span></div>
        <iframe id="loding" src="/components/Loding.html" frameborder="0"></iframe>
    </div>

    <main class="main">
        <!-- Header Image -->
        <div class="header-image">
            <div class="js-parallax" style="background-image: url(/assets/vitae/img/image_header.jpg);"></div>
        </div>

        <div class="container gutter-top">
            <!-- Header -->
            <header class="header box">
                <div class="header__left">
                    <div class="header__photo">
                        <img class="header__photo-img" src="/assets/img/avatar.jpg" alt="Ronald Robertson">
                    </div>
                    <div class="header__base-info">
                        <h4 class="title titl--h4" i18n="name">Ronald Robertson</h4>
                        <div class="status" i18n="job">Creative Director</div>
                        <ul class="header__social">
                            <li><span i18n="ageName">age：</span><span i18n="age">22</span></li>
                            <li><span i18n="educationName">education：</span><span i18n="education">bachelor</span></li>
                        </ul>
                    </div>
                </div>
                <div class="header__right">
                    <ul class="header__contact">
                        <span class="overhead" i18n="emailName">Email</span>
                        <li i18n="email">1356557225@qq.com</li>
                        <span class="overhead" i18n="phoneName">Phone</span>
                        <li i18n="phone">+86 153-0246-4434</li>
                    </ul>
                    <ul class="header__contact">
                        <span class="overhead" i18n="birthdayName">Birthday</span>
                        <li i18n="birthday">20 April 2001</li>
                        <span class="overhead" i18n="locationName">Location</span>
                        <li i18n="location">Zhaoqin, China</li>
                    </ul>
                </div>
            </header>

            <div class="row sticky-parent">
                <!-- Sidebar nav -->
                <aside class="col-12 col-md-12 col-lg-2">
                    <div class="sidebar box sticky-column">
                        <ul class="nav">
                            <li class="nav__item"><a href="/pages/vitae.html"><i class="icon-user"></i><span i18n="About">About</span></a></li>
                            <li class="nav__item"><a class="active" href="/components/vitae/resume.html"><i class="icon-file-text"></i><span i18n="Resume">synopsis</span></a></li>
                            <li class="nav__item"><a href="/components/vitae/works.html"><i class="icon-codesandbox"></i><span i18n="Works">Works</span></a></li>
                            <!-- <li class="nav__item"><a href="/components/vitae/blog.html"><i class="icon-book-open"></i>Blog</a></li> -->
                            <!-- <li class="nav__item"><a href="/components/vitae/contact.html"><i class="icon-book"></i><span i18n="Contact">Contact</span></a></li> -->
                            <li class="nav__item">
                                <div id="tooltip-inner"></div><a id="translate-button"><i class="icon-translate-filling"></i></a></li>
                        </ul>
                    </div>
                </aside>

                <!-- Content -->
                <div class="col-12 col-md-12 col-lg-10">
                    <div class="box box-content">
                        <div class="pb-2">
                            <h1 class="title title--h1 first-title title__separate" i18n="Relevant_experience">Experience</h1>
                        </div>

                        <!-- Experience -->
                        <div class="row">
                            <div class="col-12">
                                <h2 class="title title--h3"><img class="title-icon" src="/assets/vitae/icons/icon-experience.svg" alt="" /> <span i18n="title_resume">Work experience</span></h2>
                                <div class="timeline">
                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="company_name">Shenzhen Daheng data security Technology</h5>
                                        <span class="timeline__period">2023.11 — 2024.03 <span class="text_right" i18n="job_name">web front-end development engineer</span></span>
                                        <h5 class="title--h5 timeline__period" i18n="title_job">Job content:</h5>
                                        <p class="timeline__title" i18n="job_content1">1.Cooperate with designers and back-end developers to complete the launch of the website.</p>
                                        <p class="timeline__title" i18n="job_content2">2.Realize data interaction at the front and back end, optimize the code and maintain good compatibility under each browser.</p>
                                        <p class="timeline__title" i18n="job_content3">3.Responsible for the front-end code development of user business modules of the management system.</p>
                                    </article>

                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="company_name2">Shenzhen Science and Technology Ltd.</h5>
                                        <span class="timeline__period">2024.05 — 2024.07 <span class="text_right" i18n="job_name">web front-end development engineer</span></span>
                                        <h5 class="title--h5 timeline__period" i18n="title_job">Job content:</h5>
                                        <p class="timeline__title" i18n="job_content2-1">● Technology stack: Proficient in TypeScript, Vue.js, Vuex, Vue Router, Element UI and other front-end frameworks and libraries, familiar with HTML5, JavaScript ES6+, and experience with Vite build tools.</p>
                                        <p class="timeline__title" i18n="job_content2-2">● Project Management: Participated in the front-end construction of the company's flagship product 'Pushi back-end Management System', led the design and implementation of UI, improved page loading speed by 30%, and improved user interaction experience.</p>
                                        <p class="timeline__title" i18n="job_content2-3">● performance optimization: Optimize front-end resource loading, and significantly reduce page load time and first screen rendering time through lazy loading, image compression, and virtualized lists.</p>
                                        <p class="timeline__title" i18n="job_content2-4">● code quality: The introduction of ESLint and Prettier to maintain code style consistency improves code readability and maintainability.</p>
                                        <p class="timeline__title" i18n="job_content2-5">● teamwork: Working closely with the back-end development team to ensure the efficient utilization of API interfaces and participating in code reviews contributed to the team's technical growth and code quality</p>
                                    </article>
                                </div>
                            </div>
                        </div>

                        <!-- Experience -->
                        <div class="row">
                            <div class="col-12">
                                <h2 class="title title--h3"><img class="title-icon" src="/assets/vitae/img/project.svg" alt="" /> <span i18n="title_project">Project experience</span></h2>
                                <div class="timeline">
                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="project_name_TX">Tongxin data management system</h5>
                                        <span class="timeline__period">2021.06 — 2023.06<span class="text_right" i18n="job_role1">Web full stack development</span></span>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction2">Project introduction：</b>
                                            <span i18n="project_desc_TX">“Tongxin Data management System” is a data management system for construction projects on the site. The construction workers report their work to the app, and the documenters check the construction progress through the management system. I am responsible for the form file management, team members registration and team members sign in and other functions.</span>
                                        </p>
                                        <p class="timeline__description">
                                            <b i18n="project_introduction">Technology stack：</b>
                                            <span i18n="project_responsibility1">模块化可拖拽数据界面、Echarts赋能的高级数据可视化、机器人指令下发与设备管控自动化、机器人实时状态监控与健康管理、数据展示大屏</span>
                                        </p>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction3">Technical highlight：</b>
                                            <span>
												<ol type="1">
													<li i18n="project_TX_highlight1">AES encryption and decryption of user privacy information are performed to prevent the leakage of user privacy information</li>
													<li i18n="project_TX_highlight2">Add the draggable attribute to the selected form, drag it to the folder, release the mouse, and use the dragend event to save the draggable form to the specified folder</li>
													<li i18n="project_TX_highlight3">Generate two-dimensional code images with qrcode technology for project information, and generate project cards with html2canvas canvas for download</li>
												</ol>
											</span>
                                        </p>
                                    </article>

                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="project_name_mini">Questionnaire mini program</h5>
                                        <span class="timeline__period">2023.08 — 2023.09<span class="text_right" i18n="job_role2">front-end development</span></span>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction2">Project introduction：</b>
                                            <span i18n="project_desc_mini">"Questionnaire mini program" is based on the uniapp framework to develop wechat mini programs. Its main functions include setting questionnaires, limiting answers to mobile phones, ip and wechat signals, etc. It is compatible with pc and mobile terminals. I am responsible for the front-end development of the entire mini program, and the development cycle is 20 days.</span>
                                        </p>
                                        <p class="timeline__description">
                                            <b i18n="project_introduction">Technology stack：</b>
                                            <span i18n="project_responsibility2">Vue2、Uniapp、H5、less</span>
                                        </p>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction3">Technical highlight：</b>
                                            <span>
												<ol type="1">
													<li i18n="project_mini_highlight1">Based on the secondary encapsulation of uni request, mount the request ($request) to the vue prototype to realize data interaction between the front and back ends</li>
													<li i18n="project_mini_highlight2">Use the getCurrentPages method to pass data to the parent component to achieve dynamic data addition and reduce interface request resources</li>
													<li i18n="project_mini_highlight3">Component-based development design idea is adopted to separate API interface from business logic, improving development efficiency and code reusability</li>
												</ol>
											</span>
                                        </p>
                                    </article>

                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="project_name_SY">Chaozhou geographical indication traceability management system</h5>
                                        <span class="timeline__period">2023.12 — 2024.02<span class="text_right" i18n="job_role3">front-end development</span></span>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction2">Project introduction：</b>
                                            <span i18n="project_desc_SY">"Chaozhou geographical indication traceability Management System" is to manage the enterprise, and the enterprise's business scanning code viewing effect products for scanning code anti-counterfeiting verification. I was responsible for the development of the user center, which involved mobile phone number modification, password modification, mailbox binding/changing/untying and other functions.</span>
                                        </p>
                                        <p class="timeline__description">
                                            <b i18n="project_introduction">Technology stack：</b>
                                            <span i18n="project_responsibility3">Vue3、TypeScript、Less、Pinia、Vite</span>
                                        </p>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction3">Technical highlight：</b>
                                            <span>
												<ol type="1">
													<li i18n="project_SY_highlight1">The use of componentization, the use of multi-page modules as components, not only increase the development efficiency, but also increase the maintainability and scalability of the code</li>
													<li i18n="project_SY_highlight2">Front-end interface adaptive to ensure adaptive display on different screen sizes and devices, improving user access experience</li>
													<li i18n="project_SY_highlight3">Strict verification and formatting of input data to prevent security vulnerabilities and user experience problems caused by malicious input and data format errors</li>
												</ol>
											</span>
                                        </p>
                                    </article>

                                    <!-- Item -->
                                    <article class="timeline__item">
                                        <h5 class="title title--h5 timeline__title" i18n="project_name_ZD">Zhi Dun</h5>
                                        <span class="timeline__period">2024.02 — 2024.03<span class="text_right" i18n="job_role4">front-end development</span></span>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction2">Project introduction：</b>
                                            <span i18n="project_desc_ZD">"Zhi Dun" is a desktop application for screen recording forensics against some infringing websites, and upload evidence to the local and server. I am responsible for implementing the screen recording function and saving the files locally.</span>
                                        </p>
                                        <p class="timeline__description">
                                            <b i18n="project_introduction">Technology stack：</b>
                                            <span i18n="project_responsibility4">Vue3、TtpeScript、Pinia、Electron、NodeJs</span>
                                        </p>
                                        <p class="timeline__title">
                                            <b i18n="project_introduction3">Technical highlight：</b>
                                            <span>
												<ol type="1">
													<li i18n="project_ZD_highlight1">The recorded content is written to the file in blocks, which increases the content storage speed by 10 times and reduces the memory usage by 10 times</li>
													<li i18n="project_ZD_highlight2">Using createReadStream to read file content and calculate file SHA256 hash value in blocks, the content storage speed is increased 3 times and the memory usage is reduced 3 times</li>
												</ol>
											</span>
                                        </p>
                                    </article>
                                </div>
                            </div>
                        </div>

                        <!-- Skills -->
                        <div class="row">
                            <div class="col-12">
                                <h2 class="title title--h3" i18n="title_skills">My Skills</h2>
                                <div class="box box__border">
                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>HTML</span><span>80%</span></div>
                                        </div>
                                        <div class="progress-text"><span>HTML</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>CSS</span><span>70%</span></div>
                                        </div>
                                        <div class="progress-text"><span>CSS</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>JavaScript</span><span>80%</span></div>
                                        </div>
                                        <div class="progress-text"><span>JavaScript</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>JQuery</span><span>75%</span></div>
                                        </div>
                                        <div class="progress-text"><span>JQuery</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>Vue</span><span>80%</span></div>
                                        </div>
                                        <div class="progress-text"><span>Vue</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>TypeScript</span><span>50%</span></div>
                                        </div>
                                        <div class="progress-text"><span>TypeScript</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>Element-UI</span><span>100%</span></div>
                                        </div>
                                        <div class="progress-text"><span>Element-UI</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>Uniapp</span><span>80%</span></div>
                                        </div>
                                        <div class="progress-text"><span>Uniapp</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>Electron</span><span>50%</span></div>
                                        </div>
                                        <div class="progress-text"><span>Electron</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>NodeJs</span><span>50%</span></div>
                                        </div>
                                        <div class="progress-text"><span>NodeJs</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>ES6</span><span>80%</span></div>
                                        </div>
                                        <div class="progress-text"><span>ES6</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>PHP</span><span>85%</span></div>
                                        </div>
                                        <div class="progress-text"><span>PHP</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>MySQL</span><span>50%</span></div>
                                        </div>
                                        <div class="progress-text"><span>MySQL</span></div>
                                    </div>

                                    <!-- Progress -->
                                    <div class="progress">
                                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-text"><span>Git</span><span>60%</span></div>
                                        </div>
                                        <div class="progress-text"><span>Git</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <footer class="footer">© 2024 wheat</footer>
                </div>
            </div>
        </div>
    </main>

    <div class="back-to-top"></div>

    <!-- SVG masks -->
    <svg class="svg-defs">
        <clipPath id="avatar-box">
            <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
        </clipPath>
        <clipPath id="avatar-hexagon">
             <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
        </clipPath>		
    </svg>

    <div id="menu"></div>

    <!-- JavaScripts -->
    <script src="/assets/vitae/js/jquery-3.4.1.min.js"></script>
    <script src="/assets/vitae/js/plugins.min.js"></script>
    <script src="/assets/vitae/js/common.js"></script>
    <script src="/assets/vitae/js/jquery.i18n.min.js"></script>
    <script src="/assets/vitae/js/cn-en-translate.js"></script>
    <script src="/assets/vitae/demo/plugins-demo.js"></script>
    <script src="/assets/js/more.js"></script>
</body>

</html>